<template>
	<div class="top">
		<div @click="$router.push('/')"><img src="../../assets/logo.png" /></div>
		<div class="middle"><van-icon name="search" size="25px" class="icon" @click="getSearch" /></div>
		<div>
			<img :src="headimg" @click="getinfo" v-if="headimg" />
			<img src="../../assets/default_img.jpg" @click="getinfo" v-else />
			<div class="download">下载App</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			headimg: ''
		};
	},
	// props:['headimg'],
	methods: {
		async getheadimg() {
			if (localStorage.getItem('token')) {
				const res = await this.$http.get('/user/' + localStorage.getItem('id'));
				// console.log(res);
				this.headimg = res.data[0].user_img;
			}
		},
		getinfo() {
			// 解决二次点击报错问题
			if (this.$route.path != `/userInfo`) {
				if (localStorage.getItem('token') && localStorage.getItem('id')) {
					this.$router.push('/userInfo');
				} else {
					this.$router.push('/login');
					this.$msg('请先登录');
				}
			}
		},
		getSearch(){
			this.$router.push('/search')
		}
	},
	created() {
		this.getheadimg();
	}
};
</script>

<style lang="less">
.top {
	height: 45px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	div:nth-child(1) {
		img {
			width: 75%;
		}
	}
	.middle {
		justify-content: flex-end;
		padding-right: 23px;
		.icon {
			color: #cdcdcd;
		}
	}
	div:nth-child(3) {
		img {
			width: 24px;
			height: 24px;
		}
		.download {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fb7299;
			color: white;
			width: 82px;
			height: 24px;
			margin: 10px;
			border-radius: 3px;
			font-size: 13px;
		}
	}
}
</style>
